<template>
	<view>
		<cu-custom :bgLiner="true" :isBlack="false">
			<block slot="content">{{titles}}</block>
		</cu-custom>
		<view class="position-rel z-i-1" :style="{height:(windwoHeight - CustomBar)+'px'}">
			<view class="contents flex top-wrap">
				<view class="flex align-center">
					<image :src="info.cover?info.cover.split(',')[0]:''" class="top-img" mode="aspectFill"></image>
				</view>
				<view class="p-l-10">
					<view class="f-16 white fontBold">
						{{info.name}}
					</view>
					<view class="f-12 white m-t-2">
						{{info.address}}
					</view>
					<view class="f-12 white m-t-2">
						最低消费金额：{{minimum_charge}}元
					</view>
				</view>
			</view>
			<view class="order-wrap " v-if="type==2">
				<view class="order-main flex">
					<!-- 左侧菜系列表 -->
					<scroll-view scroll-y class="category-list" :scroll-top="leftScrollTop" scroll-with-animation>
						<view v-for="(category, index) in categories" :key="'cat-'+index" class="category-item"
							:class="{active: currentCategoryIndex === index,catbor:currentCategoryIndex==0}"
							@click="selectCategory(index)">
							{{category.name}}
						</view>
					</scroll-view>

					<!-- 右侧菜品列表 -->
					<scroll-view scroll-y class="dish-list" :scroll-into-view="scrollIntoId" @scroll="handleScroll"
						scroll-with-animation>
						<view v-for="(category, index) in categories" :key="'dish-cat-'+index" :id="'cat-'+index"
							class="category-section">
							<view class="category-title">{{category.name}}</view>
							<view v-for="cat in category.mockCategories" :key="cat.id">
								<view class="category-title category-title2">{{cat.name}}</view>
								<view v-for="dish in cat.dishes" :key="dish.id" class="dish-item">
									<image :src="dish.image" class="dish-image" mode="aspectFill"></image>
									<view class="dish-info flex-1">
										<view class="">
											<view class="dish-name text-overflow-2">{{dish.name}}</view>
										</view>
										<view class="flex justify-space-between align-center ">
											<view class="dish-price">¥{{dish.price}}</view>
											<view class="p-t-3 p-b-3 f-12 white fontBold p-l-10 p-r-10 b-r-5 bg-orange position-rel"
												@click="chooseDish(dish)" v-if="dish.specs_arr&&dish.specs_arr.length">
												选规格
												<view class="num-tip" v-if="dish.count > 0">
													{{dish.count}}
												</view>
											</view>
											<view class="dish-actions" v-else>
												<image src="/static/img/minus.png" class="action-icon" v-show="dish.count>0"
													@click.stop="changeDishCount(dish, -1)"></image>
												<text class="dish-count orange" v-show="dish.count>0">{{dish.count}}</text>
												<image src="/static/img/add.png" class="action-icon"
													@click.stop="changeDishCount(dish, 1)"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="order-wrap " v-if="type==1">
				<view class="order-main p-l-15 p-r-15 p-t-10 p-b-15">
					<view v-for="dish in setMenu" :key="dish.id" class="dish-item">
						<image :src="dish.img" class="dish-image" mode="aspectFill"></image>
						<view class="dish-info flex-1">
							<view class="">
								<view class="dish-name text-overflow-2">{{dish.name}}</view>
							</view>
							<view class="flex justify-space-between align-center ">
								<view class="flex align-center">
									<view class="dish-price">¥{{dish.price}}</view>
									<view class="dish-price-line p-l-10">¥{{dish.underline_price}}</view>
								</view>
								<view class="p-t-3 p-b-3 f-12 white fontBold p-l-10 p-r-10 b-r-5 bg-orange position-rel"
									@click="chooseSet(dish)">
									选套餐
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-wrap flex justify-space-around" v-if="type==2">
			<view class="bottom-btn bottom-btn1" @click="sub(1)">
				<image src="/static/img/food.png" class="food m-r-5"></image>
				已点{{totalCount}}个
			</view>
			<view class="bottom-btn bottom-btn2" @click="sub(2)">
				￥{{totalPrice}} 去结算
			</view>
		</view>
		<uni-popup ref="popupFood" type="bottom" :animation="false">
			<view class="popup_content popup_content_set">
				<view class="pop-tops">
					<view v-for="dish in foodList" :key="dish.id" class="dish-item">
						<image :src="dish.img" class="dish-image" mode="aspectFill"></image>
						<view class="dish-info flex-1">
							<view class="flex justify-space-between">
								<view class="flex-1">
									<view class="dish-name text-overflow-2">{{dish.name}}</view>
								</view>
								<view class="flex align-start m-t-5">
									<view class="bg-orange f-12 white b-r-5 p-t-2 p-b-2 p-l-8 p-r-8 flex-none " @click="delFood(dish)">
										删除
									</view>
								</view>
							</view>
							<view class="f-13" v-if="dish.spec">
								<view class="black-9 ">规格：{{dish.spec}}</view>
							</view>
							<view class="f-12" v-if="dish.is_del==1">
								<view class="black-9 ">该规格已下架，请点击<text class="red-2 p-l-3 p-r-5" @click="delFood(dish)">删除</text></view>
							</view>
							<view class="flex justify-space-between align-center ">
								<view class="dish-price">¥{{dish.price}}</view>
								<view class="yellow ">
									*{{dish.num}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-center btn-wrap">
					<view class="btn-border m-r-15" @click="closePopFood">
						取消
					</view>
					<view class=" btn" @click="sub(2)">
						￥{{totalPrice}} 去结算
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="pop-tops">
					<view class="flex">
						<view class="flex align-center m-r-10">
							<image :src="transferItem.image" class="imgs" mode=""></image>
						</view>
						<view class="flex flex-direction justify-space-between flex-1">
							<view class="fontBold f-16">
								{{transferItem.name}}
							</view>
							<view class="orange f-16 fontBold">
								￥{{transferItem.price}}
							</view>
						</view>
					</view>
					<view v-for="(Titem,Tindex) in transferItem.specs_arr" :key="Tindex">
						<view class="orange f-16 fontBold m-t-10">
							{{Titem.name}}
						</view>
						<view class="m-t-5">
							<view class="flex flex-wrap">
								<view class="m-t-5 m-b-5 m-r-6 ser-item" :class="{'ser-item-act':item==Titem.spec}"
									v-for="(item,index) in Titem.attr_arr" :key="index" @click="chooseSpec(item,Titem)">
									{{item}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-space-between m-t-5">
						<view class="orange f-16 fontBold ">
							数量
						</view>
						<view class="dish-actions">
							<image src="/static/img/minus.png" class="action-icon" v-show="transferItem.count>0"
								@click.stop="changeDishCount2(transferItem, -1)">
							</image>
							<text class="dish-count orange" v-show="transferItem.count>0">{{transferItem.count}}</text>
							<image src="/static/img/add.png" class="action-icon"
								@click.stop="changeDishCount2(transferItem, 1)">
							</image>
						</view>
					</view>
				</view>
				<view class="flex justify-center btn-wrap">
					<view class="btn-border m-r-15" @click="closePop">
						取消
					</view>
					<view class=" btn" @click="sureAttr">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupSetMenu" type="bottom" :animation="false">
			<view class="popup_content popup_content_set">
				<view class="pop-set">
					<view class="f-16 orange fontBold">
						{{transferItem2.name}}
					</view>
					<view class="" v-for="(item,index) in transferItem2.package_details_arr" :key="item.id">
						<view class="m-t-5 m-b-5">
							<text class="f-16 fontBold m-r-10">{{item.name}}</text>
							<!-- <text class="black-6">可选{{item.num}}份，已选{{item.choose||0}}份，同一商品不可重复选</text> -->
						</view>
						<view class="flex flex-wrap">
							<view class="trans-item p-b-5 m-b-5" :class="[(index2+1)%4==0?'':'m-r-8']"
								v-for="(item2,index2) in item.cuisine_arr" :key="item2.id">
								<view class="flex align-center position-rel">
									<image :src="item2.img" class="imgs"></image>
									<!-- <view class="tips" v-show="item2.specs_arr&&item2.specs_arr.length&&item2.is_have==0&&item2.num==1">
										请重新选择!
									</view> -->
								</view>
								<view class="f-12 p-l-5 m-t-5 m-b-5">
									{{item2.name}}
								</view>
								<!-- <view class="f-12 p-l-5 m-t-5 m-b-5 black-6" 
								style="transform: scale(.75);transform-origin: left;white-space: nowrap;word-break: break-all;"
								>
									规格:{{item2.spec_xz?item2.spec_xz:'无'}}
								</view> -->
								<!-- <view class="p-t-3 p-b-3 f-12 white fontBold p-l-10 p-r-10 b-r-5 bg-orange position-rel"
									@click="chooseDish2(item2)" v-if="item2.specs_arr&&item2.specs_arr.length">
									选规格
									<view class="num-tip" v-if="item2.num > 0">
										{{item2.num}}
									</view>
								</view> -->
								<!-- <view class="flex align-center justify-center">
									<image src="/static/img/minus.png" class="action-icon"
										@click.stop="changeSetCount(item,item2,-1)">
									</image>
									<text class="dish-count orange">{{item2.num}}</text>
									<image src="/static/img/add.png" class="action-icon"
										@click.stop="changeSetCount(item,item2,1)">
									</image>
								</view> -->
							</view>
						</view>
					</view>

				</view>
				<view class="flex justify-center btn-wrap fontBold">
					<view class="btn-border m-r-15" @click="closePopSet">
						取消
					</view>
					<view class=" btn" @click="sureSet">
						￥{{transferItem2.price}} 确定
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupMenu" type="center" :animation="false">
			<view class="popup_content">
				<view class="pop-tops">
					<view class="flex">
						<view class="flex align-center m-r-10">
							<image :src="transferItem.img" class="imgs" mode=""></image>
						</view>
						<view class="flex flex-direction justify-space-between flex-1">
							<view class="fontBold f-16">
								{{transferItem.name}}
							</view>
							<view class="orange f-16 fontBold">
								￥{{transferItem.price}}
							</view>
						</view>
					</view>
					<view v-for="(Titem,Tindex) in transferItem.specs_arr" :key="Tindex">
						<view class="orange f-16 fontBold m-t-10">
							{{Titem.name}}
						</view>
						<view class="m-t-5">
							<view class="flex flex-wrap">
								<view class="m-t-5 m-b-5 m-r-6 ser-item" :class="{'ser-item-act':item==Titem.spec}"
									v-for="(item,index) in Titem.attr_arr" :key="index" @click="chooseSpec2(item,Titem)">
									{{item}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-center btn-wrap">
					<view class="btn-border m-r-15" @click="closePopMenu">
						取消
					</view>
					<view class=" btn" @click="sureAttrMenu">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const debounce = (func, wait = 100) => {
		let timeout;
		return function() {
			const context = this;
			const args = arguments;
			clearTimeout(timeout);
			timeout = setTimeout(() => {
				func.apply(context, args);
			}, wait);
		};
	};
	export default {
		data() {
			return {
				titles: '人均点餐',
				type: 1,
				windwoHeight: 675,
				categories: [], // 菜系数据
				currentCategoryIndex: 0, // 当前选中的菜系索引
				scrollIntoId: '', // 右侧滚动定位ID
				leftScrollTop: 0, // 左侧滚动位置
				dishScrollTop: 0, // 右侧滚动位置
				scrollTimer: null, // 滚动防抖定时器
				categoryPositions: [], // 存储每个分类的位置信息
				totalCount: 0, // 总数量
				totalPrice: 0, // 总价格
				isScrolling: false, // 是否正在滚动
				sectionTops: [],

				transferItem: {}, //中转item
				transferItem2:{},
				setMenu: [], //套餐列表
				foodList: [], //已点菜列表
				info: {},

				id: 0,
				roomId: 0,
				book_at: '',
				user_num: 0,
				when:1,//1中午 2晚上
				minimum_charge:0,//包间最低消费金额
			}
		},
		onLoad(option) {
			this.windwoHeight = uni.getSystemInfoSync().windowHeight;
			this.id = option.id;
			this.roomId = option.roomId;
			if (option.minimum_charge) {
				this.minimum_charge = option.minimum_charge;
			}
			if (option.book_at) {
				this.book_at = option.book_at;
			}
			if (option.user_num) {
				this.user_num = option.user_num;
			}
			if (option.when) {
				this.when = option.when;
			}
			if (option.type) {
				this.type = option.type;
				if (this.type == 2) {
					this.titles = '菜单点餐';
					this.loadMenuData();
				} else {
					this.getSetMenu();
				}
			}
			this.getShopInfo();
			// setTimeout(() => {
			// 	this.openPop()
			// }, 300)
		},
		onUnload() {
			// 组件卸载时清除定时器
			if (this.scrollTimer) {
				clearTimeout(this.scrollTimer);
			}
		},
		methods: {
			sub(type) {
				if (this.totalCount === 0) {
					uni.showToast({
						title: '请先选择菜品',
						icon: 'none'
					});
					return;
				}
				
				switch (type) {
					case 1:
						// let arr = [];
						// this.categories.forEach(category => {
						// 	category.dishes.forEach(dish => {
						// 		if (dish.count > 0) {
						// 			arr.push(dish);
						// 		}
						// 	});
						// });
						// this.foodList = arr;
						this.$refs.popupFood.open();
						break;
					case 2:
						if(this.minimum_charge&&Number(this.minimum_charge) > Number(this.totalPrice)){
							this.$util.showToast('未达到最低消费金额,请重新选择',1500);
							return;
						}
						this.closePopFood();
						uni.navigateTo({
							url: '/pages/operate/orderSub?id=' + this.id + '&roomId=' + this.roomId + '&book_at=' +
								this.book_at + '&user_num=' + this.user_num+ '&when=' + this.when
						})
						break;
				}
			},
			closePopFood() {
				this.$refs.popupFood.close()
			},
			closePop() {
				this.$refs.popup.close()
			},
			openPop() {
				this.$refs.popup.open()
			},
			closePopMenu(){
				this.$refs.popupMenu.close()
			},
			openPopMenu(){
				this.$refs.popupMenu.open()
			},
			getShopInfo() {
				let data = {
					shop_id: this.id
				}
				this.$http('/apicloud/Shop/shopInfo', data).then(res => {
					if (res.code == 200) {
						let datas = res.data;
						this.info = datas.info;
					}
				})
			},
			loadMenuData() {
				let data = {
					shop_id: this.id,
					set_menu_id: ''
				};
				this.$http('/apicloud/Shop/shopCateV1', data).then(res => {
					if (res.code == 200) {
						let list = res.data.list;
						let categories = [];
						list.forEach((item, i) => {
							let mockCategories = [];
							item.subset.forEach(items=>{
								let dishes = [];
								items.cuisine.forEach((item2, j) => {
									item2.specs_arr.forEach(item3=>{
										this.$set(item3,'spec','');
									})
									dishes.push({
										id: item2.id,
										name: item2.name,
										price: parseFloat(item2.price),
										image: item2.img,
										count: item2.num,
										specs_arr: item2.specs_arr,
										spec: item2.spec_xz,
										sku:item2.sku
									});
								})
								if(dishes.length){
									mockCategories.push({
										id: items.id,
										name: items.name,
										dishes: dishes
									});
								}
							})
							if(mockCategories.length){
								categories.push({
									id: item.id,
									name: item.name,
									mockCategories: mockCategories
								});
							}
						})
						this.categories = categories;

						// 计算初始分类位置
						this.$nextTick(() => {
							setTimeout(()=>{
								this.updateTotals();
							},100)
							this.calculateSectionPositions();
						});
					}
				})
				// 模拟数据 - 实际应从接口获取
				// const mockCategories = [];
				// const categoryNames = ['热销推荐', '特色菜', '凉菜', '热菜', '汤类', '主食', '酒水', '甜品'];

				// for (let i = 0; i < 8; i++) {
				// 	const dishes = [];
				// 	const dishCount = i === 0 ? 15 : (i === 1 ? 10 : 8); // 不同分类菜品数量不同

				// 	for (let j = 0; j < dishCount; j++) {
				// 		dishes.push({
				// 			id: `dish-${i}-${j}`,
				// 			name: `${categoryNames[i]}菜品${j+1}`,
				// 			price: (10 + Math.floor(Math.random() * 50)).toFixed(2),
				// 			image: '/static/img/log-bg.png',
				// 			count: 0
				// 		});
				// 	}

				// 	mockCategories.push({
				// 		id: `category-${i}`,
				// 		name: categoryNames[i],
				// 		dishes: dishes
				// 	});
				// }


			},

			// 计算每个分类的位置信息
			calculateSectionPositions() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					this.sectionTops = [];

					this.categories.forEach((_, index) => {
						query.select(`#cat-${index}`).boundingClientRect(rect => {
							if (rect) {
								this.sectionTops[index] = rect.top;
							}
						}).exec();
					});
				});
			},

			// 处理分类点击
			selectCategory(index) {
				this.isScrolling = true;
				this.currentCategoryIndex = index;
				this.scrollIntoId = `cat-${index}`;

				setTimeout(() => {
					this.isScrolling = false;
					this.scrollIntoId = '';
				}, 300);

				this.adjustLeftScroll(index);
			},

			// 调整左侧滚动位置
			adjustLeftScroll(index) {
				const itemHeight = 80; // 分类项高度
				const visibleItems = Math.floor(this.windowHeight / itemHeight);
				this.leftScrollTop = Math.max(0, (index - Math.floor(visibleItems / 2)) * itemHeight);
			},

			// 处理右侧滚动
			handleScroll(e) {
				if (this.isScrolling) return;

				clearTimeout(this.scrollTimer);
				this.scrollTimer = setTimeout(() => {
					const scrollTop = e.detail.scrollTop;
					let activeIndex = 0;

					// 简单高效的查找算法
					for (let i = 0; i < this.sectionTops.length; i++) {
						if (this.sectionTops[i] <= scrollTop + 180) {
							activeIndex = i;
						} else {
							break;
						}
					}

					if (this.currentCategoryIndex !== activeIndex) {
						this.currentCategoryIndex = activeIndex;
						this.adjustLeftScroll(activeIndex);
					}
				}, 50);
			},

			// 修改菜品数量
			changeDishCount(dish, delta) {
				const newCount = Math.max(0, dish.count + delta);
				this.$set(dish, 'count', newCount);
				this.changeDishNum(dish);

				// 更新总数量和总价格
				setTimeout(()=>{
					this.updateTotals();
				},100)
			},
			changeDishCount2(dish, delta) {
				const newCount = Math.max(0, dish.count + delta);
				this.$set(dish, 'count', newCount);
			},
			// 更新总数量和总价格
			updateTotals(id) {
				let count = 0;
				let price = 0;
				let data = {
					shop_id: this.id,
					set_menu_id: ''
				};
				this.$http('/apicloud/Shop/shopCateV1', data).then(res => {
					if (res.code == 200) {
						let order_cuisine = res.data.order_cuisine;
						this.foodList = order_cuisine;
						price = res.data.order_price;
						order_cuisine.forEach(dish => {
							count += dish.num;
							// price += dish.num * parseFloat(dish.price);
						});
						this.totalCount = count;
						this.totalPrice = price
						if(id){
							let count2 = 0;
							order_cuisine.forEach(dish => {
								if(dish.cuisine_id == id){
									count2 += dish.num;
								}
							});
							this.categories.forEach(category => {
								category.mockCategories.forEach(cat=>{
									cat.dishes.forEach(dish => {
										if (dish.id == id) {
											dish.count = count2;
										}
									});
								})
							});
						}
					}
				})
				// this.categories.forEach(category => {
				// 	category.dishes.forEach(dish => {
				// 		count += dish.count;
				// 		price += dish.count * parseFloat(dish.price);
				// 	});
				// });
				// this.totalCount = count;
				// this.totalPrice = price.toFixed(2);
			},
			chooseDish(item) {
				this.transferItem = JSON.parse(JSON.stringify(item));
				let sku = this.transferItem.sku;
				let arr = [];
				this.transferItem.specs_arr.forEach(items=>{
					items.spec = items.attr_arr[0];
					arr.push(items.spec);
				})
				let str = arr.join('/');
				sku.forEach(items=>{
					if(items.specs_name == str){
						this.transferItem.price = parseFloat(items.price);
					}
				})
				this.transferItem.count = 0;
				this.foodList.forEach(items=>{
					if(items.spec == str){
						this.transferItem.count = items.num;
					}
				})
				// this.transferItem.spec = this.transferItem.specs_arr[0];
				
				this.openPop();
			},
			chooseSpec(item,Titem) {
				// this.transferItem = {
				// 	...this.transferItem,
				// 	spec: item
				// }
				Titem.spec = item;
				let sku = this.transferItem.sku;
				let arr = [];
				this.transferItem.specs_arr.forEach(items=>{
					arr.push(items.spec);
				})
				let str = arr.join('/');
				sku.forEach(items=>{
					if(items.specs_name == str){
						this.transferItem.price = parseFloat(items.price);
					}
				})
				this.transferItem.count = 0;
				this.foodList.forEach(items=>{
					if(items.spec == str){
						this.transferItem.count = items.num;
					}
				})
			},
			sureAttr() {
				console.log(this.transferItem)
				// if (this.transferItem.count > 0 && (!this.transferItem.spec || this.transferItem.spec == '')) {
				// 	this.$util.showToast('请选择规格', 1500);
				// 	return;
				// }
				let arr = [];
				this.transferItem.specs_arr.forEach(items=>{
					arr.push(items.spec);
				})
				let str = arr.join('/');
				let obj = {
					spec:str,
					count:this.transferItem.count,
					id:this.transferItem.id
				}
				this.changeDishNum(obj);
				// this.categories.forEach(category => {
				// 	category.dishes.forEach(dish => {
				// 		if (dish.id == this.transferItem.id) {
				// 			dish.count = this.transferItem.count;
				// 		}
				// 	});
				// });
				setTimeout(()=>{
					this.updateTotals(this.transferItem.id);
				},100)
				this.closePop();
			},
			changeDishNum(item) {
				let data = {
					cuisine_id: item.id,
					num: item.count,
					spec: item.spec ? item.spec : ''
				};
				this.$http('/apicloud/Shop/orderDishes', data).then(res => {
					if (res.code == 200) {

					}
				})
			},
			/*
			人均点餐
			*/
			getSetMenu() {
				let data = {
					shop_id: this.id
				};
				this.$http('/apicloud/Shop/setMenuList', data).then(res => {
					if (res.code == 200) {
						let list = res.data.list;
						this.setMenu = list;
					}
				})
			},
			getMenuDetail(id) {
				let data = {
					id
				};
				this.$http('/apicloud/Shop/setMenuDetail', data).then(res => {
					if (res.code == 200) {
						let info = res.data.info;
						this.transferItem2 = info;
						if (this.transferItem2.package_details_arr && this.transferItem2.package_details_arr
							.length) {
							this.transferItem2.package_details_arr.forEach(item => {
								let len = 0;
								item.cuisine_arr.forEach(item2 => {
									item2.specs_arr.forEach(item3=>{
										this.$set(item3, 'spec', '');
									})
									let is_have = 0;
									if(item2.sku){
										item2.sku.forEach(item3=>{
											if(item3.specs_name == item2.spec_xz){
												is_have = 1;
											}
										})
									}
									this.$set(item2, 'is_have', is_have);
									len += item2.num;
								})
								this.$set(item, 'choose', len);
							})
						}
						this.$refs.popupSetMenu.open();
					}
				})
			},
			chooseSet(item) {
				this.getMenuDetail(item.id);
			},
			changeSetCount(item,item2, type) {
				if(type==1&&item.choose >= item.num){
					this.$util.showToast('选择的菜品已达上限',1500);
					return;
				}
				switch (type) {
					case -1:
						item2.num = 0;
						setTimeout(()=>{
							item2.spec_xz = '';
						},250)
						item2.is_have = 1;
						this.changeSetNum(item2);
						break;
					case 1:
						if(item2.specs_arr&&item2.specs_arr.length){
							this.chooseDish2(item2);
						}else{
							item2.num = 1;
							item2.is_have = 1;
							this.changeSetNum(item2);
						}
						break;
				}
				this.transferItem2.package_details_arr.forEach(item => {
					let len = 0;
					item.cuisine_arr.forEach(item2 => {
						len += item2.num;
					})
					item.choose = len;
				})
			},
			changeSetNum(item2) {
				let data = {
					set_menu_id: this.transferItem2.id,
					cuisine_id: item2.id,
					num: item2.num,
					spec: item2.spec_xz ? item2.spec_xz : ''
				};
				this.$http('/apicloud/Shop/orderDishes', data).then(res => {
					if (res.code == 200) {

					}
				})
			},
			closePopSet() {
				this.$refs.popupSetMenu.close()
			},
			sureSet() {
				if(this.minimum_charge&&Number(this.minimum_charge) > Number(this.transferItem2.price)){
					this.$util.showToast('未达到最低消费金额,请重新选择',1500);
					return;
				}
				this.$refs.popupSetMenu.close()
				uni.navigateTo({
					url: '/pages/operate/orderSub?set_menu_id=' + this.transferItem2.id + '&id=' + this.id +
						'&roomId=' + this.roomId + '&book_at=' + this.book_at + '&user_num=' + this.user_num+ '&when=' + this.when
				})
			},
			delFood(item){
				let data = {
					cuisine_id: item.cuisine_id,
					num: 0,
					spec: item.spec ? item.spec : ''
				};
				this.$http('/apicloud/Shop/orderDishes', data).then(res => {
					if (res.code == 200) {
						setTimeout(()=>{
							this.updateTotals(item.cuisine_id);
						},100)
					}
				})
			},
			chooseDish2(item) {
				this.transferItem = JSON.parse(JSON.stringify(item));
				let arr = [],arr2 = [];
				if(item.spec_xz){
					arr2 = item.spec_xz.split('/');
				}
				let len = this.transferItem.specs_arr.length;
				this.transferItem.specs_arr.forEach((items,index)=>{
					items.spec = items.attr_arr[0];
					if(arr2.length&&arr2.length == len){
						items.attr_arr.forEach((items2,index2)=>{
							if(items2 == arr2[index]){
								items.spec = arr2[index];
							}
						})
					}
					arr.push(items.spec);
				})
				let str = arr.join('/');
				this.transferItem.spec_xz = str;
				this.openPopMenu();
			},
			chooseSpec2(item,Titem) {
				Titem.spec = item;
				let arr = [];
				this.transferItem.specs_arr.forEach(items=>{
					arr.push(items.spec);
				})
				console.log(arr)
				let str = arr.join('/');
				this.transferItem.spec_xz = str;
			},
			sureAttrMenu(){
				this.transferItem2.package_details_arr.forEach(item => {
					item.cuisine_arr.forEach(item2 => {
						if(item2.id == this.transferItem.id){
							item2.num = 1;
							item2.is_have = 1;
							item2.spec_xz = this.transferItem.spec_xz;
							this.changeSetNum(item2);
						}
					})
				})
				this.transferItem2.package_details_arr.forEach(item => {
					let len = 0;
					item.cuisine_arr.forEach(item2 => {
						len += item2.num;
					})
					item.choose = len;
				})
				this.closePopMenu();
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #FF5200;
	}

	.top-img {
		width: 260rpx;
		height: 200rpx;
		border-radius: 12rpx;
	}

	.room-desc {
		background: #FFFAE6;
		border-radius: 4rpx;
		padding: 2rpx 6rpx;
		color: #FFCB00;
		font-size: 24rpx;
	}

	.top-wrap {
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
	}

	.order-wrap {
		width: 100%;
		height: 100%;
		padding-top: 260rpx;
		overflow-x: hidden;

	}

	.order-main {
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;
	}

	.category-list {
		width: 180rpx;
		background-color: #f8f8f8;
		flex-shrink: 0;
		height: calc(100% - 130rpx);
		padding-bottom: 130rpx;
		border-radius: 20rpx 0 0 0;
	}

	.catbor {
		border-radius: 20rpx 0 0 0;
	}

	.category-item {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #484848;
		border-left: 6rpx solid transparent;
		position: relative;
		font-weight: bold;

		&.active {
			background-color: #fff;
			color: #FF5200;
			font-size: 32rpx;

			&::after {
				content: '';
				position: absolute;
				left: 6rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 35rpx;
				border-radius: 10rpx;
				background-color: #FF5200;
			}
		}
	}

	.dish-list {
		height: calc(100% - 130rpx);
		flex: 1;
		background-color: #fff;
		padding: 0 0rpx 130rpx 20rpx;
		border-radius: 0 20rpx 0 0;
		.category-section{
			padding-right: 20rpx;
		}
	}

	.category-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF5200;
		padding: 10rpx 0 10rpx;
		background-color: #fff;
	}
	.category-title2{
		color: #333;
		font-size: 32rpx;
		padding: 5rpx 0 5rpx 20rpx;
	}
	.dish-item {
		display: flex;
		padding: 15rpx 0 15rpx 20rpx;
	}

	.dish-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		background-color: #f5f5f5;
	}

	.dish-info {
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.dish-name {
		font-size: 32rpx;
		color: #484848;
		font-weight: bold;
	}

	.dish-price {
		font-size: 32rpx;
		color: #FF5200;
		font-weight: bold;
	}
	.dish-price-line{
		text-decoration: line-through;
		color: #999;
		font-size: 24rpx;
	}
	.dish-actions {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		margin-left: 20rpx;
	}

	.action-icon {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.dish-count {
		margin: 0 15rpx;
		font-size: 28rpx;
		min-width: 30rpx;
		text-align: center;
	}

	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;

		.bottom-btn {
			width: 45%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}

		.food {
			width: 50rpx;
			height: 50rpx;
		}

		.bottom-btn1 {
			background: #FFCB00;
		}

		.bottom-btn2 {
			background: #FF5200;
		}
	}

	.popup_content {
		width: 750rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 28rpx;
		position: relative;

		.pop-tops {
			min-height: 600rpx;
			max-height: 900rpx;
			overflow-y: auto;
			padding: 30rpx;
		}

		.pop-set {
			min-height: 800rpx;
			max-height: 1000rpx;
			overflow-y: auto;
			padding: 30rpx;
		}

		.imgs {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
		}

		.ser-item {
			min-width: 160rpx;
			height: 76rpx;
			background: #F0F0F0;
			border-radius: 4rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.ser-item-act {
			background: #FFE7DC;
			color: #FF5200;
		}

		.btn-wrap {
			padding: 24rpx 60rpx;
			width: 100%;
			box-shadow: 0px -3px 20px rgba(0, 0, 0, 0.05);
		}

		.btn-border {
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 60rpx;
			color: #FF5200;
			border: 1px solid #FF5200;
			flex: 1;
		}

		.btn {
			background: #FF5200;
			color: #ffffff;
			border-radius: 60rpx;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
		}
	}

	.popup_content_set {
		border-radius: 24rpx 24rpx 0 0;

		.trans-item {
			width: 160rpx;
			// height: 130px;
			background: #FFFFFF;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;
			overflow-x: hidden;
		}
	}
	.num-tip{
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		background: #FFCB00;
		color: #fff;
		right: -15rpx;
		top: -20rpx;
		border-radius: 50%;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: normal;
	}
	.tips {
		background: #FFE3E3;
		width: 160rpx;
		padding: 10rpx 0;
		border-radius: 8rpx;
		position: absolute;
		bottom: 0rpx;
		left: 0;
		z-index: 5;
		font-size: 24rpx;
		color: #FF0101;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>